<template>
    <div
        class="search"
        :class="{ 'search-focus': isFocus }"
        v-click-outside="onClickOutside"
    >
        <el-popover
            :visible="visible"
            placement="bottom"
            :show-arrow="false"
            :width="400"
            :teleported="false"
        >
            <template #default>
                <div class="search-history">
                    <div class="flex-space-between">
                        <h1>搜索历史</h1>
                        <el-button
                            link
                            style="color: var(--color-text-l)"
                            @click="clearHistory"
                            >清空</el-button
                        >
                    </div>
                    <div class="search-history-content">
                        <span
                            class="tag"
                            v-for="(item, index) in historyList"
                            :key="index"
                        >
                            <i
                                class="icon icon-x"
                                @click="deleteHistory(index)"
                            ></i>
                            <span>{{ item }}</span>
                        </span>
                    </div>
                </div>
                <div class="search-discover">
                    <h1>搜索发现</h1>
                </div>
            </template>
            <template #reference>
                <div
                    class="search-container"
                    :class="{ 'search-focus': isFocus }"
                >
                    <el-input
                        v-model="searchValue"
                        suffix-icon="Search"
                        placeholder="请输入内容"
                        @focus="searchFocus"
                        @input="searchInput"
                    ></el-input>
                </div>
            </template>
        </el-popover>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

const visible = ref<boolean>(false)
const isFocus = ref<boolean>(false)
const searchValue = ref<string>('')
const historyList = ref<string[]>(['1111', '22'])

const searchFocus = (): void => {
    isFocus.value = true
    setTimeout(() => {
        visible.value = true
    }, 300)
}

const searchInput = (): void => {}

// 清空搜索历史
const clearHistory = (): void => {
    historyList.value = []
}

// 删除搜索历史
const deleteHistory = (index: number): void => {}

// 点击空白处
const onClickOutside = () => {
    visible.value = false
    setTimeout(() => {
        isFocus.value = false
    }, 300)
}
</script>

<style lang="less" scoped>
.transitionWidth {
    transition: width 0.3s;
}

h1 {
    font-weight: 700;
    color: var(--color-text-s);
}

.search {
    line-height: 52px;
    margin-left: 15px;
    .search-container {
        width: 250px;
        transition: width 0.3s;
    }
    .search-focus {
        width: 400px;
        .el-input :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 1px var(--color-primary) inset;
        }
    }
    .search-history {
        .search-history-content {
            display: flex;
            flex-wrap: wrap;
            padding-top: 10px;
            > span.tag {
                padding: 5px 15px 5px;
                margin: 0 10px 10px 0;
                cursor: pointer;
                background-color: var(--color-gray-p);
                border-radius: 5px;
                position: relative;

                &:hover {
                    color: var(--color-primary);
                    .icon {
                        display: block;
                    }
                }

                .icon {
                    display: none;
                    font-size: var(--font-size-medium);
                    position: absolute;
                    top: -3px;
                    right: -3px;
                    color: var(--color-text-l);
                }
            }
        }
    }
    .search-discover {
        margin-top: 15px;
    }
}
</style>
